<template>
<div>
  <el-row>
    <el-col :span="20" v-model="product" :key="product.id" :offset="1">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="product.img" class="image" />
        <div style="padding: 14px;">
          <div>商品名称:{{ product.name }}</div>
          <div>商品价格:{{ product.price }}</div>
          <div>
            <el-button type="primary" @click="pay(product)">立即购买</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "Product",
  data(){
    return{
      product:{},
      order:{},
      username:'',
    }
  },methods:{
    //支付功能
    pay(val){
      console.log(val)
      this.order.pid=val.id;
      this.order.name=val.name;
      this.order.uname=this.username;
      this.order.price=val.price;
      this.axios.post("http://localhost:9200/order/createOrder",this.order).then(res=>{
        if (res.data){
          //跳转支付
          window.open("http://localhost:9200/order/pay?id="+val.id+"&price="+val.price+"&name="+val.name);
        }
      })
    },
  },created() {
    //从路径获取参数
    let id = this.$route.params.id;
    //从后台获取单条数据
    this.axios.get("http://localhost:9200/pro/getById?id="+id).then(res=>{
      this.product=res.data;
    });
    let item = JSON.parse(localStorage.getItem("user"));
    //赋值用户名
    this.username=item.name;
  }
}
</script>

<style scoped>

</style>